<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <th:block th:include="common.html :: source"></th:block>
    <title>欢迎页面</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<style>
    *,body{
        padding: 0px;
        margin: 0px;
    }
    html,body{
        height: 100%;
        width: 100%;
    }
    #test1{
        width: 1200px;
        height: 600px;
        margin-top: 50px;
    }
</style>
<body>
<div>
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div><img src="/images/banner_02.jpg" height="500px" width="1400px"/></div>
            <div><img src="/images/banner_01.jpg" height="500px" width="1400px"/></div>
            <div><img src="/images/banner_03.jpg" height="500px" width="1400px"/></div>
            <div><img src="/images/banner_04.jpg" height="500px" width="1400px"/></div>
            <div><img src="/images/banner_05.jpg" height="500px" width="1400px"/></div>
        </div>
    </div>
</div>
<div style="margin-top: 25px;margin-left: 450px">
    ————XX商城管理系统，致力于打造最好的管理系统！
</div>

<!-- 条目中可以是任意内容，如：<img src=""> -->
<script src="/layui/layui.js" charset="UTF-8"></script>
<script>
  layui.use('carousel', function(){
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
      elem: '#test1'
      ,width: '100%' //设置容器宽度
      ,height: '500px'
      ,arrow: 'always'
      ,anim: 'default' //切换动画方式
      ,autoplay: true  //自动切换
      ,interval: 3000
        ,indicator: 'inside'
      ,
    });
  });
</script>

</body>
</html>